<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>照片店用户注册</title>
<link href="<%=path %>/static/usercss/css/all.css?jllljwe" rel="stylesheet" type="text/css">
<script type="text/javascript" src="<%=path%>/static/js/jquery-3.2.1.js"></script>
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
</head>

<body>
<jsp:include page="/WEB-INF/web/includ/header.jsp"></jsp:include>
<section>
<div class="wrap">
  
    <div id="register">
      <div class="logo"><img src="<%=path %>/static/usercss/images/registerlogo.png" width="300" height="50" alt="分类搜索"></div>
      <h1>用户注册</h1>
      <div id="respont">
      <form action="<%=path %>/web/regiest" id="form" method="post" >
        <dl>
          <dt>用户名</dt>
          <dd>
            <input name="name" type="text" id="name">
          </dd>
        </dl>
        <dl>
          <dt>昵称</dt>
          <dd>
            <input name="nickName" type="text" id="nickName">
          </dd>
        </dl>
        <dl>
          <dt>邮箱</dt>
          <dd class="validate">
            <input name="mailBox" type="text" class="tel" id="mailBox">
            <input class="telvalidate" type="button" name="checked" id="checked" value="申请验证">
          </dd>
        </dl>
        <dl>
          <dt>验证码</dt>
          <dd>
            <input name="mailBoxCode" type="text" id="mailBoxCode">
          </dd>
        </dl>
        <dl>
          <dt>密码</dt>
          <dd>
            <input name="password" type="password" id="password">
          </dd>
        </dl>
        <dl>
          <dt>重复密码</dt>
          <dd>
            <input name="password1" type="password" id="password1">
          </dd>
        </dl>
       
        <div class="submit">
          <input type="submit" name="submit" id="submit" value="提交">
          <input type="button" name="back" id="back" value="重置">
        </div>
        </form>
      </div>
    </div>
  
</div>
</section>

<jsp:include page="/WEB-INF/web/includ/footer.jsp"></jsp:include>
<script type="text/javascript" src="<%=path%>/static/managecss/lib/laypage/1.2/laypage.js"></script>
<script type="text/javascript" src="<%=path%>/static/managecss/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery.validation/1.14.0/jquery.validate.js"></script> 
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery.validation/1.14.0/validate-methods.js"></script> 
<script type="text/javascript" src="<%=path%>/static/managecss/lib/jquery.validation/1.14.0/messages_zh.js"></script> 
<script type="text/javascript">
	var msg ="${param.msg}";

	if(msg=='code'){
		
		layer.alert("验证码错误");	
	}
	if(msg=='user'){
		
		layer.alert("用户名已存在！");
	}
</script>
<script type="text/javascript">
var x=true;
var y = true;
$(function() {
	
	$("#name").blur(function() {
		var name = $(this).val();
		
		$.get("<%=path%>/web/userinfo/isName",
				{name:name},
				function(mes){
					if(mes){
						layer.msg("该账号已注册");
						y=false;
					}		
		}.bind(this))			
	});
	
	$("#mailBox").blur(function() {
		var mailBox = $(this).val();
		$.get("<%=path%>/web/userinfo/isMail",
				{mailBox:mailBox},
				function(mes){
					if(mes){
						layer.msg("该邮箱已注册");
						y=false;
					}		
		}.bind(this))			
	});
	
	$("#mailBoxCode").blur(function() {
		$.get("<%=path%>/web/mailCode",
				{},
				function(mes){
			var str1 = $(this).val();
			if(str1!=""){
				if(str1.toLowerCase() == mes.toLowerCase())
				{
					x=true;					
				}
				else{
				 	layer.msg("验证码错误"); 
					 /* layer.alert("验证码错误");  */
					x=false;				
				}	
			}			
		}.bind(this))			
	});
	
	$("#form").submit(function(e){
			
		  return x&&y;
	});
	
	$("#form").validate({
		rules:{
			name:{
					required:true,
					minlength:4,
					maxlength:16
				},
				nickName:{
					required:true
				
				},
				mailBox:{
					required:true,
					email:true
				},
				mailBoxCode:{
					required:true
				},
				password:{
					required:true,
				},
				password1:{
					required:true,
					equalTo:"#password"
				},
				info:{
					required:true				
				},
			},
			errorPlacement: function(error, element) {                             
				error.appendTo( element.parent() );                            
			},
			onkeyup:false,
			focusCleanup:true,
			success:"valid"
	});		
});

	/* 邮箱 */
	$(function() {
		$("#checked").click(function() {
				var mailBox = $(this).prev().val();
				
				$.post("<%=path%>/web/checkedMail",
						{mailBox:mailBox},
						function(mes){
							if(mes){
								layer.alert("验证码发送成功");
							}else{
								layer.alert("验证码发送失败，请重试");
							}
						
				});			
		});
	});

	/* 撤销所有 */
	$(function() {
		$("#back").click(function() {
		
			$("input[type!=submit]").val("");
			$("#checked").val("申请验证");
			$("#back").val("重置");
		})		
	})
</script>

</body>
</html>
